<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <!-- 视口 -->
  <meta name='viewport' content='width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no'>
  <title>天猫-移动端</title>
  <link rel='stylesheet' href='css/index.css'>
  <link rel='stylesheet' href='css/common.css'>
 </head>
 <body>
	<div id='wrap'>
		<header>
			<div class='h-top'>
				<div>
					<a href=''></a>
				</div>
				<div>
				</div>
				<div>
					<a href=''>登录</a>
				</div>
			</div>

			<div class='h-bot'>
				<a href=''>搜索商品、品牌</a>
			</div>
		</header>

		<section>
			<nav>
				<ul>
					<li>
						<a href=''>
							<img src='images/4.png'>
							<p>苏宁易购</p>
						</a>
					</li>
					<li>
						<a href=''>
							<img src='images/5.png'>
							<p>天猫超市</p>
						</a>
					</li>
					<li>
						<a href=''>
							<img src='images/6.png'>
							<p>天猫国际</p>
						</a>
					</li>
					<li>
						<a href=''>
							<img src='images/7.png'>
							<p>聚划算</p>
						</a>
					</li>
					<li>
						<a href=''><img src='images/8.png'>
						<p>分类</p>
						</a>
					</li>
				</ul>
			</nav>

			<div class='layout'>
				<ul class='clearfix'>
					<li class='fl'><a href=""><img src="images/11.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
					<li class='fl'><a href=""><img src="images/9.jpg" alt=""></a></li>
				</ul>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>

			<div class='app-down'>
				<a href=""></a>
			</div>
			
			<!-- 天猫官方直营 -->
			<div class="tmzy w-p tttttt">
				<!-- 标题 -->
				<div class='t-top clearfix'>
					<div class="title fl">
						天猫官方直营
					</div>
					<div class="t-t-b fr">
						官方直采·极速物流·售后无忧
					</div>
				</div>
				<!-- 内容 -->
				<div class="t-bot">
					<ul class='clearfix'>
						<li class='b-li-l fl'><a href="">
							<p>天猫超市</p>
							<p>品质好奶</p>
							<p>第2件0元</p>
							<img src="images/15.png" alt=""></a>
						</li>
						<li class='fl'>
							<div class="t-l-top clearfix">
								<a href="">
									<div class="t-l-l fl">
										<img src="images/16.png" alt="">
										<p>官方直采</p>
										<img src="images/17.png" alt="">
									</div>
									<div class="t-l-r fl">
										<img src="images/18.jpg" alt="">
									</div>
								</a>
							</div>

							<div class="t-l-bot clearfix">
								<div class="b-l fl">
									<a href="">
										<img src="images/19.png" alt="" class='b-l-t'>
										<p>满69减20</p>
										<img src="images/20.jpg" alt="" class='b-l-b'>
									</a>
								</div>
								<div class="b-l fl">
									<a href="">
										<img src="images/21.png" alt="" class='b-l-t'>
										<p>大牌新品来袭</p>
										<img src="images/22.jpg" alt="" class='b-l-b'>
									</a>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			<!-- 品牌活动 -->
			<div class="pphd w-p tttttt">
				<div class='t-top'>
					<div class="title">
						品牌活动
					</div>
				</div>
				<div class="p-t-b">
					<ul class='clearfix'>
						<li class='fl'><a href=""></a></li>
						<li class='fl'>
							<div class="lr-d lr-d-top clearfix"><a href="">
								<div class="lr-d-l fl">
									<img src="images/24.png" alt="">
									<p>优选新品好物</p>
									<p>今日上新20</p>
								</div>
								<div class="lr-d-r fl">
									<img src="images/25.png" alt="">
								</div></a>
							</div>
							<div class="lr-d lr-d-bot clearfix"><a href="">
								<div class="lr-d-l fl">
									<img src="images/26.png" alt=""><br>
									<img src="images/27.png" alt="">
								</div>
								<div class="lr-d-r discount fl">
									<img src="images/28.jpg" alt="">
									<div class="d-img">
									</div>
								</div></a>
							</div>
						</li>
					</ul>

					<div class="pp-bot">
						<ul>
							<li><a href=""><img src="images/35.jpg" alt=""></a></li>
							<li><a href=""><img src="images/36.png" alt=""></a></li>
							<li><a href=""><img src="images/37.jpg" alt=""></a></li>
							<li><a href=""><img src="images/38.jpg" alt=""></a></li>
							<li><a href=""></a></li>
						</ul>
					</div>
				</div>

			</div>

			<!-- 一条分界线 -->
			<div class="boundary"></div>

			<!-- 详细商品 -->
			<div class="goods w-p">
				<!-- 第一列商品 -->
				<ul class='clearfix'>
					<li class='fl'><a href="">
						<div class="g-l-top">
							<img src="images/39.jpg" alt="">
						</div>
						<div class="g-l-mid">
							<p>男装 袋装圆领T恤(短袖) 404133 优衣库</p>
							<div class='clearfix'>
								<p class='fl'>￥39</p>
								<img class='fr' src="images/40.png" alt="">
							</div>
						</div>
						<div class="g-l-bot">
							<p><span class="bluetext">[1885人认为]</span>#尺寸没有偏大#穿着很舒适#穿上显气质</p>
						</div></a>
					</li>
					<li class='fl'><a href="">
						<div class="g-l-top">
							<img src="images/41.jpg" alt="">
						</div>
						<div class="g-l-mid">
							<p>男装 袋装圆领T恤(短袖) 404133 优衣库</p>
							<div class='clearfix'>
								<p class='fl'>￥39</p>
								<img class='fr' src="images/40.png" alt="">
							</div>
						</div>
						<div class="g-l-bot">
							<p><span class="bluetext">[1885人认为]</span>#尺寸没有偏大#穿着很舒适#穿上显气质</p>
						</div></a>
					</li>
				</ul>

				<!-- 第二列商品 -->
				<ul class='clearfix'><a href="">
					<li class='fl'>
						<div class="g-l-top">
							<img src="images/42.png" alt="">
						</div>
						<div class="g-l-mid">
							<p>男装 袋装圆领T恤(短袖) 404133 优衣库</p>
							<div class='clearfix'>
								<p class='fl'>￥39</p>
								<img class='fr' src="images/40.png" alt="">
							</div>
						</div>
						<div class="g-l-bot">
							<p><span class="bluetext">[1885人认为]</span>#尺寸没有偏大#穿着很舒适#穿上显气质</p>
						</div></a>
					</li>
					<li class='fl'><a href="">
						<div class="g-l-top">
							<img src="images/43.jpg" alt="">
						</div>
						<div class="g-l-mid">
							<p>男装 袋装圆领T恤(短袖) 404133 优衣库</p>
							<div class='clearfix'>
								<p class='fl'>￥39</p>
								<img class='fr' src="images/40.png" alt="">
							</div>
						</div>
						<div class="g-l-bot">
							<p><span class="bluetext">[1885人认为]</span>#尺寸没有偏大#穿着很舒适#穿上显气质</p>
						</div></a>
					</li>
				</ul>
			</div>

			<!-- 一条分界线 -->
			<div class="boundary"></div>
		</section>

		<footer>
			<div class="f-con">
				<img src="images/44.jpg" alt="">
				<img src="images/45.jpg" alt="">
			</div>
		</footer>

		<div class="top">
			<img src="images/46.png" alt="">
		</div>
	</div>
	


	<!-- 获取到网页的宽度并设置特定的font-size -->
	<script>
		let html = document.querySelector('html');
		changeRem();
		window.addEventListener('resize',changeRem);
		function changeRem() {
			var width = html.getBoundingClientRect().width;
			html.style.fontSize = width/10 + 'px';
		}
		let topBtn = document.getElementsByClassName('top')[0];
		topBtn.onclick = function(){
			document.documentElement.scrollTop = 0;
		}
	</script>
 </body>
</html>
